import Map from 'ol/Map';
import { OSM, TileDebug, BingMaps, Vector as VectorSource, CartoDB } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import { Attribution, FullScreen, defaults as defaultControls } from 'ol/control';
import { GeoJSON } from 'ol/format'
import { platformModifierKeyOnly } from 'ol/events/condition';
import { Select, DragBox } from 'ol/interaction'
import { DEVICE_PIXEL_RATIO } from 'ol/has';
import { Fill, Stroke, Style } from 'ol/style'

//这个东西可以通过 sql 语句来筛选元素。

const mapConfig = {
    'layers': [
        {
            'type': 'cartodb',
            'options': {
                'cartocss_version': '2.1.1',
                'cartocss': '#layer { polygon-fill: #F00; }',
                'sql': 'select * from european_countries_e where area > 0',
            },
        },
    ],
};

const cartoDBSource = new CartoDB({
    account: 'documentation',
    config: mapConfig,
});

const map = new Map({
    layers: [
        new TileLayer({
            source: new OSM(),
        }),
        new TileLayer({
            source: cartoDBSource,
        }),
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2,
    }),
});

function setArea(n) {
    mapConfig.layers[0].options.sql =
        'select * from european_countries_e where area > ' + n;
    cartoDBSource.setConfig(mapConfig);
}

document.getElementById('country-area').addEventListener('change', function () {
    setArea(this.value);
});